<template>
	<view class="recommend">
		<div class="left">
			<el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item v-for="i in listMenu" :index="i.id + ''">
					<i class="el-icon-menu"></i>
					<span slot="title">{{ i.name }}</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="right">
			<el-table stripe border :data="listData" style="width: 100%" height="92%" @row-click="tableClick">
				<el-table-column v-for="i in listHead" :prop="i.prop" :label="i.label" :sortable="i.sortable" @click="tableClick"></el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="block" style="margin-top:15px;">
				<el-pagination
					align="center"
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[5, 10, 15, 20]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="allList"
				></el-pagination>
			</div>

			<el-dialog :title="gName" :visible.sync="dialogTableVisible">
				<!-- <div class="imgbox"><img :src="gSrc" alt=""></div> -->
				
				<!-- 引入自定义组件 echarts_  -->
				<div class="imgbox"><echarts_ :code="gSrc" :key="gSrc"></echarts_></div>
			</el-dialog>
		</div>
	</view>
</template>

<script>
import { leftList, sellData, sendSrc } from '../../api/api.js';
import loadImg from '../../static/loading.gif';
export default {
	name: 'recommend',
	data() {
		return {
			id_:'',
			listMenu: [],
			listHead: [],
			listData: [],
			gName: '',
			gSrc: 'https://picsum.photos/350',
			dialogTableVisible: false,
			currentPage: 1, // 当前页码
			pageSize: 10 ,// 每页的数据条数
			allList:0, // 数据总条数
		};
	},
	async beforeMount() {
		// 页面一打开就需要的数据 在这里请求
		this.listMenu = await leftList();
	},
	methods: {
		async tableClick(d) {
			// console.log(d);
			let that = this;
			this.dialogTableVisible = true;
			this.gName = d.name;
			// console.log(d.stockCode);
			this.gSrc = d.stockcode;
			// 根据股票代码请求股票图
			// let res = await sendSrc(d.stockCode);
			// let img = new Image();
			// img.src = res.data.src;
			// img.onload = function() {
			// 	// console.log(res);
			// 	that.gSrc = res.data.src;
			// };
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.currentPage = 1;
			this.pageSize = val;
		},
		//当前页改变时触发 跳转其他页
		async handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val;
			// 获取表格数据
			let res = await sellData({
				id: this.id_,
				pageSize:this.pageSize, // 一页多少条
				pageNum:this.currentPage  // 当前页码
			});
			this.listData = res.data.list;
			this.allList = res.data.rows;
		},
		async handleSelect(key) {
			let that = this;
			this.id_ = key;
			// 先获取表格的表头
			this.listMenu.forEach(item => {
				if (item.id == key) {
					that.listHead = item.table;
					return;
				}
			});
			// 获取表格数据
			let res = await sellData({
				id: key,
				pageSize:this.pageSize, // 一页多少条
				pageNum:this.currentPage  // 当前页码
			});
			this.listData = res.data.list;
			this.allList = res.data.rows;
		}
	}
};
</script>

<style lang="less">
.recommend {
	display: flex;
	justify-content: space-between;
	height: 100%;
	.left {
		height: 100%;
		width: 15vw;
		background-color: #545c64;
	}
	.right {
		height: 100%;
		width: 85vw;
		padding: 20px;
		box-sizing: border-box;
		.imgbox {
			width: 100%;
			height: 300px;
			position: relative;
			img {
				max-width: 100%;
				max-height: 100%;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
			}
		}
	}
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
	border: none !important;
}
</style>
